<template>
	<view class='input-container' v-if='visibleSync' :class='visibleSync?"emoji-visible":""'>
		<view class='input-wrapper'>
			<input type="text" placeholder='说点什么' placeholder-class='hint-input' maxlength='140' confirm-type='send' 
				class='input-emoji' @input="inputText" :value='textVal' :focus="focusStatus" @blur="focusStatus = false"
				@confirm='commitInput'/>
			<view class='emoji-quicklist'>
				<view class='emoji-change' :style="{width: itemSize + 'px', height: itemSize + 'px'}">
					<image src='/static/image/ico-emoji.png' mode='widthFix' class='i2' v-if="!fullEmojiDisplayFlag" @click="changeEmojiDisplayFlag"></image>
					<image src='/static/image/ico-keyboard.png' mode='widthFix' class='i2' v-if="fullEmojiDisplayFlag" @click="changeEmojiDisplayFlag"></image>
				</view>
				<scroll-view class='emoji-h' :scroll-x="true" :scroll-y="false" :style="{width: 'calc( 100% - ' + itemSize + 'px)'}">
					<view class='emoji-i' v-for="(emoji, emojiIndex) in quickEmojiList" :key="emojiIndex" @click='checkEmoji'
						:style="{width: itemSize + 'px', height: itemSize + 'px'}" :data-emoji='emoji'>{{emoji}}</view>
				</scroll-view>
			</view>
			<view class='emoji-list' v-if="fullEmojiDisplayFlag">
				<swiper :current='emojiPageCurrent' @change='changeEmoji' class='list-wrapper' :indicator-dots="true" :style='{height: swiperHeight + "px"}'>
					<block v-for="(emojiPage, emojiPageIndex) in fullEmojiArr" :key="emojiPageIndex">
						<swiper-item vertical="true" :data-pageindex='emojiPageIndex'>
							<view class='emoji-page'>
								<view class='emoji-item' v-for="(emoji, emojiIndex) in emojiPage" :key="emojiIndex" @click='checkEmoji'
									:style="{width: itemSize + 'px', height: itemSize + 'px'}" :data-emoji='emoji'>{{emoji}}</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	export default {
		data() {
			return {
				visibleSync: false,
				fullEmojiDisplayFlag: true,
				quickEmojiList: ['👏', '❤️','👍','🌹','👍','😘','😂','🙂','🙃'],
				itemSize: 0,
				pageColumnCount: 8,
				pageRowCount: 3,
				fullEmojiArr: [],
				fullEmojiList: [
					 '😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃',
					 '😉','😊','😇','🥰','😍','😘','😗','😚','😙','😋',
					 '😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐',
					 '🤨','😐','😑','😶','😏','😒','🙄','😬','🤥','😌',
					 '😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧',
					 '🥵','🥶','🥴','😵','🤯','🤠','🥳','😎','🤓','🧐',
					 '😕','😟','🙁','😮','😯','😲','😳','🥺','😦','😧',
					 '😨','😰','😥','😢','😭','😱','😖','😣','😞','😓',
					 '😩','😫','🥱','😤','😡','😠','🤬','👋','🤚','🖐',
					 '✋','🖖','👌','🤏','🤞','🤟','️🤘','🤙','👍','🙏',
					 '💪','😈','👿','💀','👽','👻','💣','💜','💔','️🍀',
					 '☘','🌿','🌼','🌛','🌝','🍰','🧧','🍎','🍗','🍷',
					 '🥂','🍾','🍽','🍴','🥚','🍇','🍈','🍉','🍋'
				],
				emojiPageCurrent: 0,
				textVal: '',
				swiperHeight: 100,
				focusStatus: true
			}
		},
		mounted(){
			var that = this;
			gui.init(this);
			this.itemSize=this.setting.windowWidth * 0.9 / this.pageColumnCount;
			this.swiperHeight = this.pageRowCount * this.itemSize + 30;
			var fullEmojiArr = [];
			var pageArr = null;
			for(var i=0; this.fullEmojiList!=null && i<this.fullEmojiList.length; i++){
				if(i % (this.pageColumnCount * this.pageRowCount) == 0){
					if(pageArr!=null){
						this.fullEmojiArr.push(pageArr);
					}
					pageArr = [];
				}
				pageArr.push(this.fullEmojiList[i]);
			}

			if(pageArr.length>0){
				this.fullEmojiArr.push(pageArr);
			}
		},
		methods: {
			
			hide(){
				this.visibleSync=false;
			},
			
			show(emojiDisplayFlag){
				var that = this;
				this.textVal='';
				this.visibleSync=true;
				this.$nextTick(()=>{
					that.focusStatus=true;
					if(emojiDisplayFlag!=null){
						that.fullEmojiDisplayFlag=emojiDisplayFlag;
					}
				})
			},
			
			loadFoodCover(e){
				var that = this;
				that.coverHeight = e.detail.height * that.setting.windowWidth / e.detail.width;
				var queryBox = uni.createSelectorQuery().in(that).select('.food-author');
				queryBox.boundingClientRect((rectBox)=>{
					that.posBottomAuthorBlock=rectBox.bottom;
				}).exec();
				console.log('that.posBottomAuthorBlock = ' + that.posBottomAuthorBlock);
				console.log('that.coverHeight = ' + that.coverHeight);
			},
			
			changeEmoji(e){
				var that = this;
				this.emojiPageCurrent=e.detail.current;
				this.$nextTick(()=>{
					that.focusStatus=true;
				})
			},
			
			changeEmojiDisplayFlag(){
				var that = this;
				this.fullEmojiDisplayFlag=!this.fullEmojiDisplayFlag;
				this.$nextTick(()=>{
					that.focusStatus=true;
				})
			},
			
			inputText(e){
				this.textVal=e.detail.value;
			},
			
			checkEmoji(e){
				var that = this;
				this.textVal=this.textVal + e.currentTarget.dataset.emoji;
				this.$nextTick(()=>{
					that.focusStatus=true;
				})
			},
			
			commitInput(){
				this.$emit('method', this.textVal);
				this.hide();
			}
		}
	}
</script>

<style>
	.input-container{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		position:fixed;
		bottom: 0px;
		left: 0px;
		background-color: #fff;
		z-index: 99999;
		padding: 10px 0px;
	}
	
	.input-wrapper{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 90%;
		padding: 0px 10px;
	}
	
	.input-emoji{
		background-color: #f1f1ff;
		height: 40px;
		width: calc( 100% - 40px );
		border-radius: 20px;
		padding: 0px 20px;
		font-size: 14px;
		line-height: 40px;
	}
	
	.hint-input{
		height: 40px;
		line-height: 40px;
		width: 100%;
		color: #999;
	}
	
	.emoji-quicklist{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 10px 0px 0px 0px;
	}
	
	.emoji-btn{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 16%;
	}
	
	.emoji-h{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	
	.emoji-i{
		display: inline-flex;
		flex: 1;
		font-size: 22px;
		width: 50px;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		justify-content: center;
		align-items: center;
	}
	
	.emoji-item{
		display: inline-flex;
		font-size: 22px;
		width: 50px;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		justify-content: center;
		align-items: center;
	}
	
	.emoji-change{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
	}
	
	.emoji-list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}
	
	.list-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding-bottom: 10px;
		height: 200px;
	}
	
	.emoji-page{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	
	.emoji-bottom {
	}
	
	.emoji-visible {
	}
</style>
